import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { FormInstance } from 'antd/lib/form';
import { Modal, Button, Form, message, Input } from 'antd';
import PropTypes from 'prop-types';

const FormItem = Form.Item;
const mapStateToProps = (state: any) => ({
  serviceCapabilityManagement: state.serviceCapabilityManagement,
});
class _AddModal extends PureComponent<any, any> {
  formRef = React.createRef<FormInstance>();
  static contextTypes = {
    permissions: PropTypes.array,
    dicData: PropTypes.array,
  };

  constructor(props: any) {
    super(props);
    this.state = {
      loading: false,
    };
  }

  componentDidUpdate(prevProps: any) {
    const { modalVisible, formData } = this.props;
    if (modalVisible && modalVisible !== prevProps.modalVisible && formData.id) {
      this.formRef.current?.setFieldsValue(formData);
    }
  }
  componentDidMount(): void {}
  handleSubmit = () => {
    this.formRef.current?.submit();
  };

  onFinish = (values: any) => {
    const { dispatch, formData } = this.props;
    const params = {} as any;
    let dType = 'serviceCapabilityManagement/postObjWithRes';
    let url = '/msaggregationmap/services/add'; //新增
    this.setState({
      loading: true,
    });
    if (formData.id) {
      url = '/msaggregationmap/services/update';
      params.id = formData.id;
    }
    dispatch({
      type: dType,
      payload: {
        url: url,
        ...params,
        ...values,
      },
      callback: (res: any) => {
        if (res.statusCode === '0') {
          message.success('提交成功');
          this.close(true);
        }
        this.setState({
          loading: false,
        });
      },
    });
  };

  close = (refresh = false) => {
    const { closeModal } = this.props;
    this.formRef.current && this.formRef.current.resetFields();
    closeModal(refresh);
  };
  render() {
    const { formData, modalVisible } = this.props;
    const { loading } = this.state;
    const footer = (
      <div>
        <Button size="small" onClick={() => this.close()}>
          取消
        </Button>
        <Button size="small" loading={loading} onClick={this.handleSubmit} type="primary">
          确定
        </Button>
      </div>
    );
    let title = formData.id ? '编辑服务能力' : '新增服务能力';
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: {
          span: 6,
          // offset: 4,
        },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: {
          span: 14,
        },
        md: { span: 16 },
      },
    };

    return (
      <Modal
        title={title}
        footer={footer}
        visible={modalVisible}
        width={700}
        onCancel={() => this.close()}
      >
        <Form style={{ marginTop: 12 }} ref={this.formRef} onFinish={this.onFinish}>
          <FormItem
            {...formItemLayout}
            label="服务能力"
            colon={false}
            name="serviceName"
            rules={[
              {
                required: true,
                whitespace: true,
                message: '请输入服务能力',
              },
            ]}
          >
            <Input placeholder="请输入服务能力" maxLength={20} />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="code"
            colon={false}
            name="code"
            rules={[
              {
                required: true,
                whitespace: true,
                message: '请输入英文code',
                pattern: /^[a-zA-Z]*$/,
              },
            ]}
          >
            <Input disabled={formData.id} placeholder="请输入英文code" maxLength={20} />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="描述"
            colon={false}
            name="remark"
            rules={[
              {
                whitespace: true,
                message: '请输入描述',
              },
            ]}
          >
            <Input.TextArea placeholder="请输入描述" maxLength={100} />
          </FormItem>
        </Form>
      </Modal>
    );
  }
}
export const AddModal = connect(mapStateToProps)(_AddModal);
